<template>
  <div class="house_detail">
    <!-- 顶部导航 -->
    <div class="d-topNav" v-show="isNav">
      <ul class="clearfix">
        <li v-for="(item, index) in initData.navList" :key="index" :class="index == activeNav ? 'active': ''" @click="handleToggle(index, item.ref)">{{item.title}}</li>
      </ul>
    </div>

    <div class="w">
      <!-- 搜索栏-start -->
      <Search></Search>
      <!-- 搜索栏-end -->
      <div class="container">
        <!-- 主要信息和图片 -->
        <div class="first">
          <div class="title">
            {{initData.houseInfo.title}}
          </div>
          <div class="detail clearfix">
            <div class="img-box fl">

              <el-image style="width: 800; height: 450px" :src="initData.imgList[initData.activeImg].src" :preview-src-list="initData.imgArr">
              </el-image>
              <!-- <div class="active-img">
                <img :src="initData.imgList[initData.activeImg].src" alt="">
              </div> -->
              <div class="selection clearfix">
                <div class="el-icon-arrow-left fl" @click="moveLeft"></div>
                <!-- 图片盒子 -->
                <div class="swiper clearfix">
                  <ul class="clearfix" :style="`transform: translateX(${initData.tX}px)`">
                    <li :class="index == initData.activeImg ? 'active':''" v-for="(item, index) in initData.imgList" :key="index" @click="selectImg(index)"><img :src="item.src" alt=""></li>
                  </ul>
                </div>

                <div class="el-icon-arrow-right" @click="moveRight"></div>
              </div>
            </div>
            <div class="info fr">
              <!-- 房源价格 -->
              <div class="box clearfix" v-if="initData.houseInfo.state == 1">
                <div class="price">{{initData.houseInfo.sup}}万</div>
                <div class="unit-price">单价:{{initData.houseInfo.sub}}元/㎡</div>
              </div>
              <div class="box xiajia" v-if="initData.houseInfo.state != 1">本房源未上架</div>
              <!-- 房源介绍 -->
              <div class="box intro clearfix">
                <div class="lBox">
                  <div class="top">{{initData.houseInfo.kind}}</div>
                  <div class="down">{{initData.houseInfo.floor}}</div>
                </div>
                <div class="lBox">
                  <div class="top">{{initData.houseInfo.builtArea}}㎡</div>
                  <div class="down">建筑面积</div>
                </div>
                <div class="lBox">
                  <div class="top">朝{{initData.houseInfo.orientation}}</div>
                  <div class="down">{{initData.houseInfo.builtYear}}年建成</div>
                </div>
              </div>
              <!-- 房源介绍 -->
              <div class="box">
                <p>
                  <span class="tip1">装修情况</span>
                  <span class="tip2">{{initData.houseInfo.decoration}} | 套内面积{{initData.houseInfo.insideArea}}㎡</span>
                </p>
                <p>
                  <span class="tip1">小区名称</span>
                  <span class="tip2">{{initData.houseInfo.estate.estateName}}</span>
                </p>
                <p>
                  <span class="tip1">所在区域</span>
                  <span class="tip2">{{initData.houseInfo.estate.location}}</span>
                </p>
                <p>
                  <span class="tip1">看房时间</span>
                  <span class="tip2">需联系业主请提前预约</span>
                </p>
                <p>
                  <span class="tip1">房源编号</span>
                  <span class="tip2">{{initData.houseInfo.id}}</span>
                </p>
                <p>
                  <span class="tip1">责任分行</span>
                  <span class="tip2">{{initData.houseInfo.branch}}</span>
                </p>
              </div>
              <!-- 经纪人 -->
              <div class="box clearfix">
                <div class="a-avatar fl">
                  <img :src="initData.agentList[0].avatar" alt="" width="57" height="76">
                </div>
                <div class="a-info fl">
                  <div class="a-name">{{initData.agentList[0].name}}</div>
                  <div class="a-des">我很了解该小区</div>
                  <div class="a-phone"><i class="el-icon-phone"></i> {{initData.agentList[0].phone}}</div>
                </div>

              </div>
              <!--  -->
              <div class="btn">
                <el-button type="primary"><i class="el-icon-chat-line-round"></i> 免费咨询</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 基本信息 -->
        <div class="second" ref="nav0">
          <div class="title">基本信息</div>
          <div class="h-info clearfix">
            <div class="box-l fl">
              基本属性
            </div>
            <div class="box-r fl">
              <div class="type-l fl">
                <p>
                  <span class="tip1">房屋户型</span>
                  <span class="tip2">{{initData.houseInfo.kind}}</span>
                </p>
                <p>
                  <span class="tip1">建筑面积</span>
                  <span class="tip2">{{initData.houseInfo.builtArea}}㎡</span>
                </p>
                <p>
                  <span class="tip1">用途</span>
                  <span class="tip2">{{initData.houseInfo.purpose}}</span>
                </p>
                <p>
                  <span class="tip1">产权性质</span>
                  <span class="tip2">{{initData.houseInfo.nature}}</span>
                </p>
                <p>
                  <span class="tip1">产权年限</span>
                  <span class="tip2">{{initData.houseInfo.propertyYear}}</span>
                </p>
                <p>
                  <span class="tip1">装修</span>
                  <span class="tip2">{{initData.houseInfo.decoration}}</span>
                </p>
              </div>
              <div class="type-r fl">
                <p>
                  <span class="tip1">朝向</span>
                  <span class="tip2">{{initData.houseInfo.orientation}}</span>
                </p>
                <p>
                  <span class="tip1">套内面积</span>
                  <span class="tip2">{{initData.houseInfo.insideArea}}㎡</span>
                </p>
                <p>
                  <span class="tip1">电梯</span>
                  <span class="tip2" v-if="initData.houseInfo.tag4">有电梯</span>
                  <span class="tip2" v-else>无</span>
                </p>
                <p>
                  <span class="tip1">建成</span>
                  <span class="tip2">{{initData.houseInfo.builtYear}}</span>
                </p>
                <p>
                  <span class="tip1">楼层</span>
                  <span class="tip2">{{initData.houseInfo.floor}}</span>
                </p>
                <p>
                  <span class="tip1">挂牌时间</span>
                  <span class="tip2">{{$util.timeStr2(initData.houseInfo.sellingTime)}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 房源特色 -->
        <div class="third" ref="nav1">
          <div class="title">房源特色</div>
          <div class="type clearfix">
            <p>
              <span class="tip1">房源标签</span>
              <span class="tip2">
                <el-tag class="tag1" v-if="initData.houseInfo.tag1">精选好房</el-tag>
                <el-tag v-if="initData.houseInfo.tag2">{{initData.houseInfo.tag2}}</el-tag>
                <el-tag v-if="initData.houseInfo.tag3" style="background-color: #ffeeee;">红本在手</el-tag>
                <el-tag v-if="initData.houseInfo.tag4" style="background-color: #f7f5c5;">有电梯</el-tag>
                <el-tag v-if="initData.houseInfo.tag5">随时可看</el-tag>
              </span>
            </p>
            <p>
              <span class="tip1">房源亮点</span>
              <span class="tip2">{{initData.houseInfo.lights_desc}}</span>
            </p>
            <p>
              <span class="tip1">装修描述</span>
              <span class="tip2">{{initData.houseInfo.dec_desc}}</span>
            </p>
            <p>
              <span class="tip1">户型简介</span>
              <span class="tip2">{{initData.houseInfo.kind_desc}}</span>
            </p>
            <p>
              <span class="tip1">交通配套</span>
              <span class="tip2">{{initData.houseInfo.traffic}}</span>
            </p>
          </div>
        </div>
        <!-- 对口学校 -->
        <div class="fourth" ref="nav2">
          <div class="title">对口学校</div>
          <ul class="clearfix">
            <li v-for="(v, i) in initData.schoolList" :key="i">
              <div class="cover-img">
                <img :src="v.cover" alt="">
              </div>
              <h5>{{v.name}}</h5>
              <p>{{v.tags}}</p>
              <p class="one-txt-cut">{{v.location}}</p>
            </li>
          </ul>
        </div>
        <!-- 房价走势 -->
        <div class="fifth" ref="nav3">
          <div class="title">房价走势</div>
          <div class="echarts">
            <div id="echart1" ref="chart"></div>
          </div>
        </div>
        <!-- 小区资料 -->
        <div class="sixth clearfix" ref="nav4">
          <div class="title">小区资料</div>
          <div class="fl">
            <div class="clearfix">
              <div class="cover-img fl">
                <img src="@/assets/images/jbhy-dsjb.jpg">
              </div>
              <div class="detail fl">
                <div class="name">{{initData.estate.estateName}}</div>
                <div class="info">
                  <div class="left fl">
                    <p>
                      <span class="tip1">房源数量</span>
                      <span class="tip2">在售{{initData.estate.sellingTotal}}</span>
                    </p>
                    <p>
                      <span class="tip1">规划户数</span>
                      <span class="tip2">{{initData.estate.plannednumber}}户</span>
                    </p>
                    <p>
                      <span class="tip1">容积率</span>
                      <span class="tip2">{{initData.estate.volume}}</span>
                    </p>
                    <p>
                      <span class="tip1">绿化率</span>
                      <span class="tip2">{{initData.estate.green}}%</span>
                    </p>
                  </div>
                  <div class="right fr">
                    <p>
                      <span class="tip1">建造年代</span>
                      <span class="tip2">{{initData.estate.builtYear}}年</span>
                    </p>
                    <p>
                      <span class="tip1">建筑面积</span>
                      <span class="tip2">{{initData.estate.builtArea}}㎡</span>
                    </p>
                    <p>
                      <span class="tip1">车位个数</span>
                      <span class="tip2">{{initData.estate.carplace}}</span>
                    </p>
                    <p>
                      <span class="tip1">物业公司</span>
                      <span class="tip2">{{initData.estate.property}}</span>
                    </p>
                  </div>
                </div>
                <div class="warn">------*信息仅供参考*------</div>
              </div>
            </div>
          </div>
          <div class="fr">
            <!-- 经纪人推荐 -->
            <div class="d-topAgent" :style="isFixed ? '' : {position: 'absolute',top: 0,bottom: 0,right: 0,}">
              <div class="a-title">联系经纪人</div>
              <ul>
                <li class="clearfix" v-for="(v, i) in initData.agentList" :key="i">
                  <div class="a-avatar fl">
                    <img :src="v.avatar" alt="" width="57" height="76">
                  </div>
                  <div class="a-info fl">
                    <div class="a-name">{{v.name}}</div>
                    <div class="a-phone">{{v.phone}}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <!-- 同小区在售房源 -->
        <div class="seventh" ref="nav5">
          <div class="title">同小区在售房源</div>
          <ul class="clearfix">
            <li v-for="(item, index) in sameList" :key="index">
              <div class="cover-img">
                <!-- <img src="@/assets/images/dsjb-C100002.jpg" alt=""> -->
                <img :src="item.img" alt="">
              </div>
              <h5 class="name">{{item.title}}</h5>
              <div class="clearfix">
                <div class="price fl">{{item.sup}}万</div>
                <div class="area fl">{{item.builtArea}}㎡</div>
                <div class="type fr">{{item.purpose}}</div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 我要卖房 -->
        <div class="eighth">
          <div class="title">我要卖房</div>
          <ul class="clearfix">
            <li class="fl" @click="$router.push({name: 'SellingHouse'})">
              在线委托
            </li>
            <li class="fr" @click="$router.push({name: 'sellingRecord'})">
              委托管理
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import Search from "@/components/Search";
import "@/assets/less/house_detail.less";
export default {
  name: "house_detail",
  components: {
    Search
  },
  data() {
    return {
      initData: {
        houseInfo: {
          estate: {
            estateName: '123',
            location: '123',
          }
        },
        agentList: [
          {
            id: "001",
            name: "陈铠泓",
            phone: "13655556666",
            avatar: require("@/assets/images/personal.jpg")
          },
          {
            id: "002",
            name: "陈铠泓",
            phone: "13655556666",
            avatar: require("@/assets/images/personal.jpg")
          }
        ],
        schoolList: [
          {
            id: 0,
            cover: require("@/assets/images/jbdyxx.jpg"),
            name: "广州市海珠区金碧第一小学(金碧第一小学)",
            tags: "小学/公办/建于2001年",
            location: "[海珠]广州市海珠区工业大道南第二大道"
          },
          {
            id: 1,
            cover: require("@/assets/images/djsqzx.jpg"),
            name: "广州市第九十七中学(江南新苑校区)(第九十七中学江南新苑校区)",
            tags: "初中/公办/省一级",
            location: "[海珠]广州市海珠区工业大道南第二大道"
          }
        ],
        activeImg: 0,
        tX: 0,
        imgArr: [],
        imgList: [
          { src: require("@/assets/images/detail1.jpg") },
          { src: require("@/assets/images/detail2.jpg") },
          { src: require("@/assets/images/detail3.jpg") },
          { src: require("@/assets/images/detail4.jpg") },
          { src: require("@/assets/images/detail1.jpg") },
          { src: require("@/assets/images/detail2.jpg") },
          { src: require("@/assets/images/detail3.jpg") },
          { src: require("@/assets/images/detail4.jpg") },
        ],
        navList: [
          { title: "基本信息", ref: "nav0" },
          { title: "房源特色", ref: "nav1" },
          { title: "对口学校", ref: "nav2" },
          { title: "房价走势", ref: "nav3" },
          { title: "小区资料", ref: "nav4" },
          { title: "同小区房源", ref: "nav5" }
        ],
        estate: {},
      },
      isNav: false,
      activeNav: 0,
      isFixed: false,

      // 同小区房源
      sameList: [],
    };
  },
  created() {
    let isLogin = false;
    if (this.$cookies.get('__tk')) {
      isLogin = true;
    } else {
      isLogin = false;
    }
    let oj = {
      // title: '首页',
      // nav: 'Home',
      isLogin: isLogin,
    };
    this.init();
    // console.log(this.initData.houseInfo);
    this.$nextTick(() => {
      window.addEventListener("scroll", this.showNav);
      this.$nextTick(() => {
        // document.body.scrollTo(0, 0)
      });
    })
  },
  mounted() {
    this.initEcharts();
    // this.showNav();
    document.getElementById('index').addEventListener("scroll", this.showNav);
    // window.scrollTo(0, 0)
  },
  beforeDestroy() {
    document.getElementById('index').removeEventListener("scroll", this.showNav)
  },
  methods: {
    init() {
      this.initData.imgList.forEach(v => {
        this.initData.imgArr.push(v.src);
      });
      // console.log(this.initData.imgArr);
      // console.log(this.$echarts)
      // console.log('this.$router.query',this.$route.query)
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getHousedetail',
        params: {id: this.$route.params.id}
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.houseInfo = res.data.data[0]
          this.initData.estate = res.data.data[0].estate
          this.sameEstate();
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
      // await this.sameEstate();
    },
    // 同小区房源
    sameEstate() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getSameEstate',
        params: {estateId: this.initData.houseInfo.estateId}
      }).then(res => {
        console.log('same res==>', res)
        if (res.data.code == 200) {
          this.sameList = res.data.data
          if(this.sameList.length > 4){
            this.sameList.splice(0, 4)
          }
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 顶部导航栏
    showNav() {
      let c = document.getElementById('index').scrollTop;
      // console.log(c)
      if (this.$refs.nav0.offsetTop - 51 < c) {
        this.isNav = true;
        this.activeNav = 0;
        this.isFixed = true;
        if (c > this.$refs.nav1.offsetTop - 51) {
          this.activeNav = 1;
        }
        if (c > this.$refs.nav2.offsetTop - 51) {
          this.activeNav = 2;
        }
        if (c > this.$refs.nav3.offsetTop - 51) {
          this.activeNav = 3;
        }
        if (c > this.$refs.nav4.offsetTop - 51) {
          this.activeNav = 4;
          this.isFixed = false;
        }
        if (c > this.$refs.nav5.offsetTop - 51) {
          this.activeNav = 5;
        }
      } else {
        this.isNav = false;
        this.isFixed = false;
      }
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    handleToggle(index, nav) {
      this.activeNav = index;
      //   网页被卷去的高   offsetTop
      // console.log(this.$refs[nav]);
      document.getElementById('index').scrollTo(0, this.$refs[nav].offsetTop - 50);
    },
    // 上一张图片
    moveLeft() {
      this.initData.activeImg--;
      if (this.initData.imgList.length > 6 && this.initData.activeImg > 0) {
        if (this.initData.activeImg < this.initData.imgList.length - 5) {
          if (this.initData.tX == 0) {
            return;
          }
          this.initData.tX += 124;
          // console.log(this.initData.tX);
        }
      }
      if (this.initData.activeImg < 0) {
        this.initData.activeImg = this.initData.imgList.length - 1;
        this.initData.tX = -124 * (this.initData.imgList.length - 6);
      }
    },
    // 下一张图片
    moveRight() {
      this.initData.activeImg++;
      if (this.initData.imgList.length > 6 && this.initData.activeImg < this.initData.imgList.length - 1) {
        if (4 < this.initData.activeImg) {
          if (this.initData.tX == -124 * (this.initData.imgList.length - 6)) {
            return;
          }
          this.initData.tX -= 124;
          // console.log(this.initData.tX);
        }
      }
      if (this.initData.activeImg > this.initData.imgList.length - 1) {
        this.initData.activeImg = 0;
        this.initData.tX = 0;
      }
    },
    // 点击图片
    selectImg(i) {
      this.initData.activeImg = i;
      let n = Math.abs(this.initData.tX / 124);
      if (this.initData.imgList.length - 6 > n && i > 4 + n) {
        this.initData.tX -= 124;
      } else if (0 < i && i < 1 + n) {
        this.initData.tX += 124;
      }
    },

    // 初始化eChart
    initEcharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      let option = this.getOption();
      myChart.setOption(option);
    },
    // eChart数据
    getOption() {
      return {
        legend: {
          // legendUnSelect,
          data: ["该套房单价变化", "该小区均价变化"]
        },
        tooltip: {
          trigger: "axis",
          // formatter: "{b} : <br/>{a} : {c}万/㎡",
          formatter: function (params) {
            // let data = params || 0;
            let str = `${params[0].name}<br>
                      ${params[0].seriesName}: ${params[0].value}万元<br>
                      ${params[1].seriesName}: ${params[1].value}万元`;
            return str;
          }
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        yAxis: {
          type: "value",
          // data: ['']
          axisLabel: {
            formatter: "{value} 万元/㎡"
          }
        },
        series: [
          {
            name: "该套房单价变化",
            data: [5.0, 5.1, 5.3, 5.0, 4.9, 4.7, 5.2, 5.0, 5.0, 5.0, 5.1, 5.1],
            type: "line"
          },
          {
            name: "该小区均价变化",
            data: [6.0, 6.1, 6.1, 6.0, 6.0, 5.9, 6.3, 6.1, 6.0, 6.1, 6.1, 6.2],
            type: "line"
          }
        ]
      };
    }
  }
};
</script>

<style lang="less" scoped>
</style>